<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到网易严选</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./libs/swiper.min.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 1100px;
            height: 385px;
            margin: 26px auto;
        }

        .swiper-wrapper {
            height: 385px;
        }

        .swiper-slide {
            background-position: center;
            background-size: cover;
            height: 385px;
        }
    </style>
</head>

<body>
    <header></header>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image:url(./img/banner.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(./img/banner1.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(./img/banner2.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(./img/banner3.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(./img/banner4.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(./img/banner5.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(./img/banner6.jpg)"></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-white"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
    </div>
    <div class="main">
        <div class="new">
            <div class="new-top">
                <div class="new-left">
                    <b>新品首发</b>
                    <span>为你寻觅世间好物</span>
                </div>
                <div class="new-right">
                    <a href="./html/new.html">更多新品&nbsp;&nbsp;></a>
                </div>
            </div>
            <div class="new-b">
                <ul></ul>
            </div>
        </div>
        <div class="hot">
            <div class="hot-top">
                <div class="hot-left">
                    <b>人气推荐</b>
                    <a href="./html/hot.html">热销总榜</a>
                </div>
                <div class="hot-right">
                    <a href="./html/hot.html">更多推荐&nbsp;&nbsp;></a>
                </div>
            </div>
            <div class="hot-b">
                <div class="bigPic"></div>
                <ul>
                </ul>
            </div>
        </div>
        <div class="list">
            <div class="list-top">
                <b>甄选家</b>
                <span>我们在寻找，对生活有态度的你</span>
            </div>
            <div class="list-b">
                <img src="./img/list1.jpg" class="list-left">
                <div class="list-right">
                    <img src="./img/list2.jpg" class="imgBox">
                    <img src="./img/list3.jpg" class="imgBox">
                </div>
            </div>
        </div>
    </div>
    <footer></footer>
    <script src="./libs/swiper.min.js"></script>
    <script src="./libs/jquery.min.js"></script>
    <script src="./js/pAjax.js"></script>
    <script src="./libs/cookie.js"></script>
    <script src="./js/index.js"></script>
    <!-- 轮播图js代码 -->
    <script>
        $('header').load('./html/header.html',()=>{
            let login = document.querySelector('.login')
            let sp1 = document.querySelector('.sp1')
            let sp2 = document.querySelector('.sp2')
            if(getCookie('username')){
                login.style.display = 'none'
                sp1.style.display = 'block'
                sp2.style.display = 'block'
                sp1.innerHTML = `欢迎：${getCookie('username')}`
                sp2.onclick = ()=>{
                    login.style.display = 'block'
                    sp1.style.display = 'none'
                    sp2.style.display = 'none'
                    delCookie('username')
                    delCookie('password')
                    localStorage.clear()
                    window.totalNum()
                }
            }
        })
        $('footer').load('./html/footer.html')
        var swiper = new Swiper('.swiper-container', {
            spaceBetween: 30,
            effect: 'fade',
            autoplay: {
                delay: 2000
            },
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
        swiper.el.onmouseover = function () {
            swiper.autoplay.stop();
        },
            swiper.el.onmouseleave = function () {
                swiper.autoplay.start();
            }
    </script>
</body>

</html>